<template>
  <div class="main">
    <search
      ref="mysearch"
      @doReset="doReset"
      @doQuery="doRefresh"
      :ruleform="ruleForm"
    >
      <template slot="top">
        <el-form-item label="系统名称：" prop="systemId">
          <el-select v-model="ruleForm.systemId" @change="selectSysChanged">
            <el-option value="" label="全部"></el-option>
            <el-option
              v-for="(item, index) in systemList"
              :key="index"
              :label="item.name"
              :value="item.id + ''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="环境名称：" prop="environmentId">
          <el-select v-model="ruleForm.environmentId" @change="selectEnvChanged">
            <el-option value="" label="全部"></el-option>
            <el-option
              v-for="(item, index) in envList"
              :key="index"
              :label="item.name"
              :value="item.id + ''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务名称：" prop="serviceId">
          <el-select v-model="ruleForm.serviceId">
            <el-option value="" label="全部"></el-option>
            <el-option
              v-for="(item, index) in serverList"
              :key="index"
              :label="item.name"
              :value="item.id + ''"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否存活：" prop="active">
          <el-select v-model="ruleForm.active" placeholder="请选择" size="small">
            <el-option label="全部" value=""></el-option>
            <el-option
              v-for="item in resultoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间：" prop="time" class="dateTime">
          <el-date-picker
            v-model="ruleForm.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="问题描述：" prop="time">
          <el-input v-model="ruleForm.description" placeholder="请输入问题描述"></el-input>
        </el-form-item>
      </template>
    </search>
    <!-- <search @doQuery="doRefresh"></search> -->
    <div class="table-warpper">
      <mytable ref="mytable" :config="tableconfig">
        <div slot="mytablebody"></div>
        <template v-slot:active="{ data }">
          <p v-if="data.active == 1">是</p>
          <p v-else style="color:red;font-weight: 700;">否</p>
        </template>
        <template v-slot:description="{data}">
                <p v-if="data.description == null">-</p>
                <p v-else>{{ data.description }}</p>
            </template>
      </mytable>
    </div>
  </div>
</template>

<script>
import mytable from "@/components/table.vue";
import search from "@/components/search.vue";
import { servicLogList } from "@/api/serviceSurvive";
import { systemFind, environmentData,  } from "@/api/log";
import { changeParam } from "@/utils/helper";
import { getServiceData } from "@/api/configuration/serviceApi";
export default {
  components: {
    mytable,
    search,
  },
  data() {
    return {
      tableconfig: {
        loading: false,
        isselection: false,
        ispagination: true,
        isfixed: true,
        tabledata: [],
        isindex: true,
        thead: [
          { sort: null, label: "系统名称", prop: "systemName", width: 200 },
          { sort: null, label: "环境名称", prop: "environmentName", width: 150 },
          { sort: null, label: "服务名称", prop: "serviceName", width: 200 },
          { sort: null, label: "是否存活", prop: "active", type: "slot",width:140 },
          { sort: null, label: "开始时间", prop: "startTime",width:200 },
          { sort: null, label: "问题描述", prop: "description",type:'slot' },
        ],
        // checkedAll: false, //全选所有
        checkedPage: false, //全选本页
        currentpage: 1,
        pagesize: 1,
        total: 3,
      },
      resultoptions: [
        {
          value: "1",
          label: "是",
        },
        {
          value: "0",
          label: "否",
        },
      ],
      ruleForm: {
        startTime: "",
        endTime: "",
        serviceId: "",
        systemId:'',
        environmentId:'',
        active: "",
        description: "",
        time: [],
        pageNo: 1,
        pageSize: 20,
      },
      serverList: [],
      envList: [],
      systemList: [],
      systemId:'',
    };
  },
  methods: {
     //级联关系
    selectSysChanged(){
      const { systemId } = this.ruleForm;
      console.log(this.systemId,'systemIdsystemId');
      this.getenvDataList(systemId);
      this.getserverDataList('',systemId);
      this.ruleForm.environmentId = "";
      this.ruleForm.serviceId = "";
    },
    selectEnvChanged() {
      const { environmentId } = this.ruleForm;
      const { systemId } = this.ruleForm;
      console.log(environmentId,systemId,'environmentId,systemId');
      this.ruleForm.serviceId = "";
      this.getserverDataList(environmentId,systemId);
    },
    // 重置搜索
    doReset() {
      console.log(Object.keys(this.ruleForm).slice(0, -2), "this.ruleForm");
      Object.keys(this.ruleForm)
        .slice(0, -3)
        .map((x) => {
          this.ruleForm[x] = "";
        });
      this.ruleForm.time = [];
      // this.$message({
      //   message: "已重置",
      //   type: "success",
      // });
      this.getserverDataList();
      this.getenvDataList();
      this.doRefresh();
    },
    // 刷新
    doRefresh() {
      //页码从第一页开始
      this.tableconfig.currentpage = 1;
      this.ruleForm.pageNo = 1;
      //表格回到顶部
      this.$refs.mytable.$emit("handleGoTop");
      this.doQuery();
    },
    async doQuery() {
      this.tableconfig.loading = true;
      this.tableconfig.currentpage = this.ruleForm.pageNo;
      this.tableconfig.pagesize = this.ruleForm.pageSize;
      this.ruleForm.startTime = this.ruleForm.time[0];
      this.ruleForm.endTime = this.ruleForm.time[1];
      let data1 = await servicLogList(this.ruleForm);
      console.log(data1);
      if (data1.success) {
        this.tableconfig.total = data1.result.total;
        this.tableconfig.tabledata = data1.result.list;
      }
      this.tableconfig.loading = false;
    },
    // 页码数更新
    handleSizeChange(val) {
      this.ruleForm.pageNo = 1;
      this.ruleForm.pageSize = val;
      this.doQuery();
      //表格回到顶部
      this.$refs.mytable.$emit("handleGoTop");
    },
    // 当前页码更新
    handleCurrentChange(val) {
      this.ruleForm.pageNo = val;
      console.log(this.ruleForm.pageNo, "this.tableconfig.currentpage");
      this.doQuery();
      //表格回到顶部
      this.$refs.mytable.$emit("handleGoTop");
    },
    getDataList() {
      let params = {
        name: "",
        pageNo: 1,
        pageSize: 99999,
      };
      systemFind(changeParam({ ...params })).then((res) => {
        if (res.success) {
          this.systemList = res.result.list;
        }
      });
    },
    getenvDataList(systemId){
      let envParams = {
        systemId: systemId,
        systemName: "",
        name: "",
        pageNo: 1,
        pageSize: 99999,
      };
      environmentData(changeParam({ ...envParams })).then((res) => {
        if (res.success) {
          this.envList = res.result;
        }
      });
    },
    getserverDataList(environmentId,systemId){
      const params = { environmentId,systemId, pageNo: 1, pageSize: 9999 };
      getServiceData(changeParam({ ...params })).then((res) => {
        if (res.success) {
          this.serverList = res.result.list;
        }
      });
    },
  },
  created() {
    this.doQuery();
    this.getDataList();
    this.getserverDataList();
    this.getenvDataList();
  },
};
</script>
<style lang="scss" scoped>
.main {
}
</style>
